﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Sudo Slider | The frontpage standalone</title>
	<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
	<link rel="STYLESHEET" type="text/css" href="../css/style.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="../js/jquery.sudoSlider.min.js"></script>
    <style type="text/css">
        body {
            background: url('http://webbies.dk/assets/templates/SudoSlider/images/bg/bg_limited.gif') repeat-x #fff;
        }
        #frontPageSlider ul, #frontPageSlider li{margin:0;padding:0;list-style:none;position:relative;display:block;}
        #frontPageSlider, #frontPageSlider li {width:696px;overflow:hidden;}

        #frontPageSlider ul li, #frontPageSlider, #container {
            width:100%;
        }

        .nextBtn {
            left: 960px;
        }

        .textSlide {
            position:relative;
            background:#ffffff;
            min-height: 300px;
        }

        .textSlide li {
            overflow: visible !important;
            list-style: disc !important;
            display: list-item !important;
            margin-left:20px !important;
            margin-bottom: 5px !important;
            font-size: 1.4em !important;
            font-weight: lighter;
            color: #555 !important;
            width: auto !important;
        }

        .customlink {
            cursor: pointer;
        }

        .slideContainer {
            width: 960px;
            margin: 0 auto;
            position:relative;
        }

            /*Demo slider*/
        #demoslider ul, #demoslider li{position:relative;margin:0;padding:0;list-style:none !important;display:block;}
        #demoslider li {margin: 0 !important;}
        #demoslider li , #demoslider img{width:570px;overflow:hidden;height:197px;}
        #demoslider {width:570px;overflow:hidden; }
        #demoslider img {border:none;}


        #slidercontainer {margin:0 auto;width:570px;position:relative;}
        .prevBtn, .nextBtn{margin:0;padding:0;display:block;overflow:hidden;text-indent:-8000px;display:block;width:30px;height:77px;position:absolute;left:-30px;top:121px;z-index:1000;background:url(http://webbies.dk/assets/files/SudoSlider/package/images/btn_prev.gif) no-repeat 0 0;cursor:pointer;}
        .nextBtn{ background:url(http://webbies.dk/assets/files/SudoSlider/package/images/btn_next.gif) no-repeat 0 0;}

        #slidercontainer .nextBtn  {left:570px; !important}

    </style>
    <script>
        $(document).ready(function(){
            // The main slider
            (function () {
                // The video on slide 3.
                var dubstebVideoPlayer = loadVideo('dubstebVideo', 'hDlif8Km4S4', true);

                var oldSlide = 0;
                var frontPageSlider = $("#frontPageSlider").sudoSlider({
                    effect: "boxRainGrowInDownRight",
                    boxrows : 4,
                    boxcols : 10,
                    responsive: true,
                    customlink: ".customlink",
                    history: true,
                    updatebefore: true,
                    numerictext: ["home", "download", "video", "donate", "demo"],
                    speed: 1700,
                    prevNext: false,
                    afteranimation: function (slide) {
                        if (slide == 3) {
                            dubstebVideoPlayer.playVideo();
                        }
                        oldSlide = slide;
                    },
                    beforeanimation: function () {
                        if (oldSlide == 3) {
                            dubstebVideoPlayer.pauseVideo();
                        }
                    }
                });

                // Stealing the donate links.
                $(".donateLink").click(function () {
                    frontPageSlider.goToSlide(4);
                    return false;
                })
            })();

            // The demo slider
            (function () {
                // The demo slider, thats inside the main slider. (Could just as well be initialized before the main slider).
                $("#demoslider").sudoSlider({
                    continuous:true,
                    ajax: [
                        'http://webbies.dk/assets/templates/SudoSlider/images/demoimages/01.jpg',
                        'http://webbies.dk/assets/templates/SudoSlider/images/demoimages/02.jpg',
                        'http://webbies.dk/assets/templates/SudoSlider/images/demoimages/03.jpg',
                        'http://webbies.dk/assets/templates/SudoSlider/images/demoimages/04.jpg',
                        'http://webbies.dk/assets/templates/SudoSlider/images/demoimages/05.jpg'
                    ],
                    effect: demoSliderEffect
                });

                var sliderEffects = $.fn.sudoSlider.effects;
                var effectsDropDown = $("#demoSliderEffects");
                $.each(sliderEffects, function (name, effect){
                    effectsDropDown.append("<option value=\"" + name + "\">" + name + "</option>")
                });

                function demoSliderEffect(obj) {
                    return sliderEffects[effectsDropDown.val()](obj);
                }
            })();



            // Wrap the content of the slides inside a container, to limit the width.
            $(".textSlide").each(function () {
                var that = $(this);
                var children = that.children();
                var wrappingElement = $("<div class='slideContainer'></div>");
                that.append(wrappingElement);
                wrappingElement.append(children);
            });

            // Load the video with the given videoId into the container with the given id.
            function loadVideo(id, videoId, mute) {
                if (!window.onYouTubePlayerAPIReady) {
                    var tag = document.createElement('script');
                    tag.src = "http://www.youtube.com/player_api";
                    var firstScriptTag = document.getElementsByTagName('script')[0];
                    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
                    window.youtubePlayerReady = false;
                }

                var player = false;
                function loadPlayer () {
                    player = new YT.Player(id, {
                        height: '315',
                        width: '560',
                        videoId: videoId,
                        events: {
                            'onReady': function () {
                                if (mute) {
                                    player.mute();
                                }
                            }
                            // 'onStateChange': onPlayerStateChange
                        }
                    });
                }
                if (!window.youtubePlayerReady) {
                    var oldFunction = window.onYouTubePlayerAPIReady;
                    window.onYouTubePlayerAPIReady = function () {
                        window.youtubePlayerReady = true;
                        loadPlayer();
                        if (oldFunction) {
                            oldFunction();
                        }
                    }
                } else {
                    loadPlayer();
                }
                return  {
                    playVideo : function () {
                        if (player) player.playVideo();
                    },
                    pauseVideo : function () {
                        if (player) player.pauseVideo();
                    }
                };
            }
        });
    </script>

</head>
<body>
<div id="container">
    <div style="position: relative;">
        <div id="frontPageSlider">
            <ul>
                <li class="textSlide" style="background: #f2f2f2" data-effect="sliceRevealDown">
                    <div style="margin-top:7px;margin-left:10px;width:500px;">
                        <h1 style="font-size: 30px;">Why use SudoSlider?</h1>
                        <ul>
                            <li>It can be <a href="http://webbies.dk/assets/files/SudoSlider/package/demos/responsive.html">responsive</a></li>
                            <li>Can contain <span style="color:darkgreen">ANY</span> HTML</li>
                            <li><a href="javascript:void(0);" class="customlink" data-target="5">Lots of animations</a></li>
                            <li>Can <a href="http://webbies.dk/assets/files/SudoSlider/package/demos/ajax.html">load AJAX content</a></li>
                            <li>Supports IE6+, Chrome, Firefox etc.</li>
                            <li>Callbacks and methods for developers</li>
                            <li><a href="http://webbies.dk/SudoSlider/demos.html">A pack of demos to get started</a></li>
                        </ul>
                    </div>
                    <h1 style="position:absolute;top:65px;right:50px;font-size:70px;font-weight: bold;" data-target="2" class="customlink"><a href="javascript:void(0)">Press me</a></h1>
                    <div style="position:absolute;bottom:10px;right:20px;">
                        <a href="http://webbies.dk/assets/files/SudoSlider/SudoSlider.zip" style="float:left;">
                            <img src="http://webbies.dk/assets/templates/SudoSlider/images/download_box.png" alt="image description" width="64" height="64"/>
                        </a>
                        <div style="float:left;">
                            <h1 style="font-size: 40px;position:relative;top:20px;">
                                <a href="http://webbies.dk/assets/files/SudoSlider/SudoSlider.zip">
                                    Download
                                </a>
                            </h1>
                        </div>
                    </div>
                </li>


                <li class="textSlide">
                    <a href="http://webbies.dk/assets/files/SudoSlider/SudoSlider.zip">
                        <img src="http://webbies.dk/assets/templates/SudoSlider/images/download_box.png" alt="image description"/>
                    </a>
                    <div style="position:absolute;left:256px;top:115px;">
                        <h1 style="font-size: 40px;">
                            <a href="http://webbies.dk/assets/files/SudoSlider/SudoSlider.zip">
                                Download
                            </a>
                        </h1>
                    </div>

                    <h1 style="position:absolute;top:120px;right:50px;font-size:27px;font-weight: bold;" data-target="3" class="customlink"><a href="javascript:void(0);">See a video in the slider &rarr;</a></h1>

                    <h2 style="position:absolute;left:310px;top:200px;">Press the back button in the browser to go back</h2>
                </li>


                <li class="textSlide" data-effect="slide" data-speed="700" style="height:315px;background: #f0f0f0">
                    <div style="position:absolute;top:40px;left:10px;">
                        <h1 style="font-size: 30px">
                            <a href="javascript:void(0)" data-target="2" class="customlink">&larr; Back to download</a><br/>
                            <span style="font-size: 15px;">(Or press the back button in the browser)</span>
                        </h1>
                        <h2>See other examples of <br />what's possible in <a href="http://webbies.dk/SudoSlider/demos.html">the demos</a></h2>
                    </div>
                    <div style="position:absolute;top:0;right:0;">
                        <div id="dubstebVideo"></div>
                    </div>
                </li>


                <li class="textSlide donate" data-effect="blinds1Down" data-speed="700">
                    <div style="margin-top:20px;margin-left:40px;">
                        <h2 style="font-size:300%;">Help me, <span class="orange">donate!</span></h2>
                        <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
                            <label>$</label><input type="text" name="amount" class="amount" value="5">
                            <input type="submit" name="submit" value="Donate Now" class="submit">
                            <script language="JavaScript" type="text/JavaScript">			<!--
                            if (document.images) {
                                preload_billede = new Image();
                                preload_billede.src  = "http://webbies.dk/assets/templates/SudoSlider/images/donate_hover.png";
                            }
                            //-->
                            </script>
                            <input type="hidden" name="cmd" value="_donations">
                            <input type="hidden" name="item_name" value="Webbies">
                            <input type="hidden" name="item_number" value="Donate to the Sudo Slider project">
                            <input type="hidden" name="business" value="erik1002@gmail.com">
                            <input type="hidden" name="return" value="http://webbies.dk/SudoSlider/index.php?id=54">
                        </form>
                    </div>
                    <div style="position:absolute;top:0px;left:340px;">
                        <img src="http://webbies.dk/assets/templates/SudoSlider/images/coffee.png" />
                    </div>
                </li>


                <li class="textSlide" data-effect="boxRainFlyOutDownRight">
                    <div id="slidercontainer" style="margin-top:10px;">
                        <div class="center"><h2>Effects explorer</h2></div>
                        <div class="center"><h3 style="display:inline;">Select effect </h3> <select id="demoSliderEffects"></select></div>
                        <div id="demoslider"></div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="clear"></div>
    </div>
</div>


<div style="width:728px;height:90px;margin:0 auto;">
	<script type="text/javascript">
		<!--
		google_ad_client = "pub-8170632875475442";
		/* Sudo Slider, lang horisontal */
		google_ad_slot = "0149025622";
		google_ad_width = 728;
		google_ad_height = 90;
		//-->
	</script>
	<script type="text/javascript"
	src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
	</script>
</div>
<style>

        /* Donate */
    .donate label {color: #666;font: normal normal bold 43px/normal 'helvetica neue', Helvetica, Calibri, 'Bitstream Vera', arial, sans-serif;line-height: 1;margin: 0px;padding: 0px;vertical-align: bottom;}
    .donate input.amount {color: #222;font: normal normal bold 28px/normal 'helvetica neue', Helvetica, Calibri, 'Bitstream Vera', arial, sans-serif;height: 37px;margin-left: 10px;padding: 3px 5px 0px 0px;text-align: right;width: 258px;border-color: #DDD;borde-radius:4px;background: #FAFAFA;border: 1px solid #999;}
    .donate input.submit {background: transparent url(http://webbies.dk/assets/templates/SudoSlider/images/donate.png) no-repeat;border: 0px;color: #333;display: block;font-size: 0px;height: 80px;line-height: 0;margin-top: 10px;text-indent: -9999px;width: 300px;border-color: #DDD;border-radius:4px;cursor:pointer;}
    .donate input.submit:hover {background: transparent url(http://webbies.dk/assets/templates/SudoSlider/images/donate_hover.png);}

</style>
<script type="text/javascript">
    /* Google Analytics, please remove
     var _gaq = _gaq || [];
     _gaq.push(['_setAccount', 'UA-20484420-1']);
     _gaq.push(['_trackPageview']);

     (function() {
     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
     })();
     /* */
</script>
</body>
</html>